<template>
  <style include="cr-shared-style md-select scanning-fonts cros-color-overrides">
    :host {
      --scanning-progress-bar: var(--google-blue-600);
      --scanning-progress-bar-track: rgba(
          var(--google-blue-600-rgb),
          var(--cros-second-tone-opacity));
      --scanning-scrollbar-rgb: var(--google-grey-600-rgb);
      --scanning-scrollbar: rgba(var(--scanning-scrollbar-rgb), 0.38);
      --scanning-scrollbar-thumb: rgb(var(--scanning-scrollbar-rgb))
    }

    :host-context(body.jelly-enabled) {
      --scanning-progress-bar: var(--cros-sys-progress);
      --scanning-progress-bar-track:  var(--cros-sys-progress_container);
      --scanning-scrollbar-rgb: var(--google-grey-600-rgb);
      --scanning-scrollbar: var(--cros-sys-scrollbar);
      --scanning-scrollbar-thumb: var(--cros-sys-on_secondary);
    }

    :host-context(body.jelly-enabled) select.md-select {
      --md-select-bg-color: var(--cros-sys-app_base_shaded);
      --md-select-focus-shadow-color: var(--cros-sys-focus_ring);
      --md-select-option-bg-color: var(--cros-sys-app_base_shaded);
    }

    paper-progress {
      --paper-progress-active-color: var(--scanning-progress-bar);
      --paper-progress-container-color: var(--scanning-progress-bar-track);
    }

    select {
      height: 32px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    select.md-select {
      --md-select-bg-color: var(--cros-bg-color-dropped-elevation-2);
      --md-select-focus-shadow-color: var(--cros-focus-ring-color);
      --md-select-option-bg-color: var(--cros-bg-color-elevation-2);
      background-position-x: calc(100% - 12px);
      color: var(--scanning-scan-setting-text-color);
      font-family: var(--scanning-scan-setting-font-family);
      font-size: var(--scanning-scan-setting-font-size);
      font-weight: var(--scanning-regular-font-weight);
      line-height: var(--scanning-scan-setting-line-height);
      padding-inline-end: 32px;
      padding-inline-start: 16px;
    }

    :host-context([dir='rtl']) select.md-select {
      background-position-x: 12px;
    }

    ::-webkit-scrollbar {
      background-color: var(--scanning-scrollbar);
      border-radius: 4px;
      width: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: var(--scanning-scrollbar-thumb);
      border-radius: 4px;
    }

    cr-dialog::part(dialog) {
      width: 340px;
    }

    cr-dialog [slot=title] {
      font-weight: 500;
      padding-bottom: 12px;
    }

    :host {
      --action-toolbar-height: 40px;
      --action-toolbar-width: 176px;
    }

    @media (min-width: 600px) {
      :host {
        --container-width: 600px;
        --helper-text-margin-bottom: 0;
        --left-panel-margin-inline-end: 10px;
        --left-panel-margin-inline-start: 10px;
        --left-panel-width: 200px;
        --panel-container-margin-top: 20px;
        --ready-to-scan-image-margin-top: 0;
        --right-panel-margin-inline-end: 10px;
        --right-panel-margin-inline-start: 0;
        --right-panel-padding-inline-end: 8px;
        --right-panel-padding-inline-start: 8px;
      }
    }

    @media (min-width: 768px) {
      :host {
        --container-width: 768px;
        --helper-text-margin-bottom: 56px;
        --left-panel-margin-inline-end: 32px;
        --left-panel-margin-inline-start: 32px;
        --left-panel-width: 288px;
        --panel-container-margin-top: 20px;
        --ready-to-scan-image-margin-top: 32px;
        --right-panel-margin-inline-end: 32px;
        --right-panel-margin-inline-start: 0;
        --right-panel-padding-inline-end: 16px;
        --right-panel-padding-inline-start: 16px;
      }
    }

    @media (min-width: 960px) {
      :host {
        --container-width: 960px;
        --left-panel-margin-inline-end: 48px;
        --left-panel-margin-inline-start: 48px;
        --left-panel-width: 384px;
        --panel-container-margin-top: 20px;
        --right-panel-margin-inline-end: 48px;
        --right-panel-margin-inline-start: 48px;
        --right-panel-padding-inline-end: 16px;
        --right-panel-padding-inline-start: 16px;
      }
    }

    @media (min-width: 1280px) {
      :host {
        --container-width: 1280px;
        --left-panel-margin-inline-end: 60px;
        --left-panel-margin-inline-start: 164px;
        --left-panel-width: 416px;
        --panel-container-margin-top: 64px;
        --right-panel-margin-inline-end: 164px;
        --right-panel-margin-inline-start: 60px;
        --right-panel-padding-inline-end: 32px;
        --right-panel-padding-inline-start: 32px;
      }
    }

    @media (prefers-color-scheme: dark) {
      :host-context(body:not(.jelly-enabled)) {
        --scanning-progress-bar: var(--google-blue-300);
        --scanning-progress-bar-track: rgba(
            var(--google-blue-300-rgb),
            var(--cros-second-tone-opacity));
        --scanning-scrollbar-rgb: var(--google-grey-400-rgb);
      }
    }
  </style>
</template>
